<template>
    <div id="tmpl">
      <div  class="mui-content" style="background-color:#fff">
        <ul class="mui-table-view mui-grid-view">
          <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
            <router-link v-bind="{to:'/goods/goodsinfo/'+item.ID}">
              <img class="mui-media-object" :src="item.img_url">
              <div class="mui-media-body">{{item.title}}</div>
            <div class="desc">
              <span class="span1">￥{{item.price1}}</span>
              <s>￥{{item.price2}}</s>
              <span class="span2">热卖中</span>
              <span class="span3">剩余{{item.shengyu}}件</span>
            </div>
              </router-link>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default{
data(){
    return{
        list:[]
    }
},
      mounted(){
    this.id=this.$route.params.id;
    this.getData()
      },
      methods:{
          getData(){
            this.$http.get('/api/goodslist',

            ).then(res=>{
                this.list=res.data;
            })
          },
      }
    }
</script>

<style scoped>
.mui-content li{
  border: 1px solid rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0  4px #000 ;
  -moz-box-shadow: 0 0  4px  #000;
  box-shadow: 0 0 4px  #000;


}
.desc{
  height: 60px;
margin-top: 10px;
  background-color: rgba(0,0,0,0.2);

}
  .desc .span1{
    color: red;
    position: absolute;
    left: 5px;

  }
  .desc .span2{
    position: absolute;
    left: 5px;
    bottom: 0;
  }
.desc .span3{
  position: absolute;
  right: 5px;
  bottom: 0;
}
.mui-table-view.mui-grid-view .mui-table-view-cell{
  margin-right: 0;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{
  height:220px;
  width:250px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell{
  padding-left: 0;
}
</style>
